<template>
  <div>
    <div :class="$style.slider">
      <span :class="$style.minContent">{{ minContent || min || 0 }}</span>
      <div :class="$style.vanSlider">
        <v-slider :value="sliderValue" :max="max" :min="min" @input="onValueChange" />
        <div :class="$style.sliderValueShow">{{ sliderValue || 0 }}</div>
      </div>

      <span :class="$style.maxContent">{{ maxContent || max || 100 }}</span>
    </div>
  </div>
</template>

<script>
import { Slider } from 'vant';
export default {
  name: 'Slider',
  components: {
    'v-slider': Slider,
  },
  props: {
    max: {
      type: Number,
      default: 100,
    },
    maxContent: {
      type: String,
      default: '',
    },
    min: {
      type: Number,
      defaullt: 0,
    },
    minContent: {
      type: String,
      default: '',
    },
    value: {
      type: Number,
      default: undefined,
    },
  },
  data() {
    return {
      sliderValue:
        this.value === 0 ? 0 : this.value || Math.floor(((this.min || 0) + (this.max || 100)) / 2),
    };
  },
  methods: {
    onValueChange(nowValue) {
      this.sliderValue = nowValue;
      this.$emit('change', nowValue);
    },
  },
};
</script>

<style lang="less" module>
@import '~vant/lib/style/var.less';
@import '~@scf/ding-style-less/var.less';
@import '../../global.less';

.slider {
  color: @primary-color;
  display: flex;
}

.minContent,
.maxContent {
  color: @title-color;
  font-size: 14px;
}

.minContent {
  text-align: left;
}
.maxContent {
  text-align: right;
}

.vanSlider {
  margin: 6px 12px 0 12px;
  flex: 1;
  position: relative;
}

:global {
  .van-slider {
    height: 6px;
  }
  .van-slider__button {
    width: 24px;
    height: 24px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.12);
    position: relative;
    &::before {
      content: 'lll';
      top: 5px;
      left: 8px;
      position: absolute;
    }
  }
  .van-slider__bar {
    background-color: @primary-color;
  }
}
.sliderValueShow {
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
  color: @title-color;
}
</style>
